<template>
  <section>
    <el-select size="mini" v-model="activity.propertiesData.propertiesData" value-key="id" multiple>
      <el-option v-for="p in propertiesList" :key="p.id" :value="p" :label="p.name"></el-option>
    </el-select>
    <el-main>
      <el-table :data="activity.propertiesData.propertiesData">
        <el-table-column type="index" label="序号"/>
        <el-table-column label="名称" prop="name" width="80px"/>
        <el-table-column label="编码" prop="code" width="80px"/>
        <el-table-column label="数据">
          <template slot-scope="scope">
            <el-row v-if="scope.row.data.valType === 'input'">
              <el-input size="mini" v-model="scope.row.val"></el-input>
            </el-row>
            <el-row v-else-if="scope.row.data.valType === 'blur'">
              <el-switch v-model="scope.row.val"></el-switch>
            </el-row>
            <el-row v-else-if="scope.row.data.valType === 'sel'">
              <el-radio v-model="scope.row.val" label="1">男</el-radio>
              <el-radio v-model="scope.row.val" label="2">女</el-radio>
            </el-row>
            <el-row v-else-if="scope.row.data.valType === 'limit'">
              <el-col :span="5">
                <el-input size="mini" style="width: 50px" v-model="scope.row.val.min"></el-input>
              </el-col>
              <el-col :span="2"> ~ </el-col>
              <el-col :span="5">
                <el-input size="mini"  style="width: 50px" v-model="scope.row.val.max"></el-input>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <i class="el-icon-close" @click="actProps.splice(scope.$index,1)"></i>
          </template>
        </el-table-column>
      </el-table>
      <!--<el-button @click="saveActPropBtn(activity.propertiesData.propertiesData)" size="mini">保存</el-button>-->
    </el-main>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "actProp",
    props: ['activity'],
    data(){
      return{
        propertiesList:[],
        actProps:[],
        actPropForm:{},
        actPropIds:[]
      }
    },
    created(){
      // console.log('看属性喽~',this.activity)
      if(!this.activity.propertiesData.propertiesData){
        Vue.set(this.activity.propertiesData,'propertiesData',[])
      }
      this.getActivityPropertiesList()
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getActivityPropertiesList(pageNo){
        this.fetch({name:"getActivityPropertiesList",data:{page:pageNo?pageNo:0}})
          .then(res=>{
            console.log('活动属性列表',res)
            let tmp =this.makeActPropVal(res.content)
            console.log('处理过的列表',tmp)
            this.propertiesList=tmp
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      makeActPropVal(array){
        array.forEach(a=>{
          if(a.data.valType === 'blur'){
            Vue.set(a,'val',false)
          }else if(a.data.valType === 'limit'){
            Vue.set(a,'val',{min:'',max:''})
          }else {
            Vue.set(a,'val','')
          }
        })
        return array
      },
      saveActPropBtn(actProps){
        // console.log(this.activity)
        // this.activity.propertiesData=JSON.stringify({propertiesData:actProps})
      },
    }
  }
</script>

<style scoped>

</style>
